Desenvolvimento para Dispositivos Móveis
Aula 02
Prof. Dr. Raulcézar Alves
raulcezar@gmail.com

Android Studio

  • Ambiente de Desenvolvimento Integrado (IDE) para desenvolvimento Android
  • substituiu o Android Development Tools (ADT), plugin para Eclipse IDE
  • é uma plataforma inteira dedicada para Android, melhor que um simples plugin

Estrutura de um Projeto Android

Projeto é uma árvore de diretórios e arquivos, como abrir um EXPLORER no windows

Estrutura de um Projeto Android

app é a raiz do projeto

diretório manifests

    AndroidManifest.xml
  • arquivo de configuração do aplicativo
  • define permissões de acesso aos recursos do dispositivo, como: câmera, gps, giroscópio, etc
  • cadastra as funcionalidades (activities) do app

funcionalidades de um app

  • cada funcionalidade/tela de seu app é um par de layout (visão) e activity (controle)
  • visão: é aquilo que o usuário vê, interface gráfica. Geralmente escritos em XML e salvos na pasta res
  • controle: programa que se liga a visão para buscar, processar, e gerar resultados. Escritos em Java e salvos na pasta java

funcionalidades de um app

    Padrão: activity_funcionalidade.xml e FuncionalidadeActivity.java
  • Por exemplo, uma funcionalidade de Login teria:
  • visão: activity_login.xml
  • controle: LoginActivity.java

funcionalidades de um app

    Ligação entre Controle-Visão
  • exemplo: MainActivity.java
  • na classe Java é descrito qual layout ela controla

funcionalidades de um app

    Ligação entre Controle-Visão
  • exemplo: activity_main.xml
  • no xml da tela também se referencia a classe, é possivel ter um preview da tela

diretório java

  • pacote para classes de controle (activities)
  • pacotes para classes de teste

diretório res (interface gráfcica)

  • drawable: arquivos de mídia, imagens, icones, etc
  • layout: arquivos XML de visão dos controles
  • mipmap: arquivos de lançador do aplicativo para diferentes dispositivos
  • values: arquivos de constantes para cores, textos e estilos

Acompanhamento de IMC Familiar

Layout e Funcionamento

Criando um novo App

File >> New >> Project

Criando um novo App

Nome e pacote de armazenamento para o Projeto

Criando um novo App

Selecionar Dispositívos e API, traz a mais compatível

Criando um novo App

Selecionar Template, neste caso vazio

Criando um novo App

Nomear a Activity principal, deixar "main"

Funcionalidade - Formulário (Main)

Visão: activity_main.xml

Visão

Visão

Text: campos de texto

Visão

Buttons: botões

Visão

Widgets: ferramentas especiais

Visão

Layout (View Group): distribuição de elementos na tela

Visão

Relative Layout: posiciona um elemento novo com base na posição de um elemento já disponível na tela

Visão

Linear Layout: posiciona elementos em sequência, em uma única direção (android:orientation)

Visão

Containers: podem funcionar como layouts, mas possuem recursos interativos

Visão

Google: recursos específicos da Google, como Maps

Visão

Legacy: recursos antigos

Funcionalidade - Formulário (Main)

Visão: activity_main.xml

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Mudar layout para um elemento embaixo do outro:
  • setar LinearLayout
  • setar orientação para vertical

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Adicionar elementos da tela: textos, campos e botões

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Textos constantes ficam em strings.xml 

<resources>
	<string name="app_name">IMC</string>
	<string name="imc">IMC</string>
	<string name="classificacao">Classificação</string>
	<string name="nome">*Nome:</string>
	<string name="peso">*Peso:</string>
	<string name="altura">*Altura:</string>
</resources>

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Código

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25sp"
        android:layout_marginTop="10dp"
        android:text="@string/imc"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:inputType="numberSigned"
        android:text="@string/imc"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25sp"
        android:text="@string/classificacao"
    />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/nome"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        />

    <EditText
        android:id="@+id/nome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/peso"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        />

    <EditText
        android:id="@+id/peso"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/altura"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        />
    <EditText
        android:id="@+id/altura"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        />
    <Button
        android:id="@+id/calcular"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Calcular"/>
</LinearLayout>

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Design Preview

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Trocar cores primárias do App em colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#18941B</color>
    <color name="colorPrimaryDark">#20C624</color>
    <color name="colorAccent">#BBEE00</color>
</resources>

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Trocar cores dos elementos com as cores definidas 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25sp"
        android:layout_marginTop="10dp"
        android:text="@string/imc"
        android:textColor="@color/colorPrimary"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:inputType="numberSigned"
        android:text="@string/imc"
        android:textColor="@color/colorAccent"
    />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="25sp"
        android:text="@string/classificacao"
        android:textColor="@color/colorPrimaryDark"
    />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/nome"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorAccent"
        />
    <EditText
        android:id="@+id/nome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorPrimary"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/peso"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorAccent"
        />
    <EditText
        android:id="@+id/peso"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorPrimary"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/altura"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorAccent"
        />
    <EditText
        android:id="@+id/altura"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:inputType="text"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorPrimary"
        />
    <Button
        android:id="@+id/calcular"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Calcular"
        android:background="@color/colorPrimary"
        android:textColor="#FFF"/>
</LinearLayout>

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Design Preview

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Configurar imagem de fundo
  • Faça download da imagem fundo.png
  • Copie o arquivo para as pastas de drawable

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Configurar imagem de fundo
  • Adicione esta imagem de fundo ao background de seu layout
  • android:background="@drawable/fundo"

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Configurar icone para o App
  • Faça download do arquivo mipmap.rar
  • Descompacte o arquivo e substitua as pastas do seu projeto

Funcionalidade - Formulário (Main)

Visão: activity_main.xml

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Configurar icone para o App
  • Modifique o arquivo AndroidManifest.xml

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
    Configurar icone para o App
  • Pela primeira vez vamos abrir a classe Java de controle da nossa tela
  • Abra a classe MainActivity e adicione os seguintes comandos

Funcionalidade - Formulário (Main)

Visão: activity_main.xml
Design Preview